<template>
    <div class="body">
        <div class="center">
            <el-form :model="RoleForm" :rules="rules" ref="RoleFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item  label="用户名:" label-width="bold" prop="username" class="user">
                    <el-input  v-model="RoleForm.username" style="width: 250px; height: 5px;left: 120px;top: 10px" size="small" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item  prop="password" class="pass">
                    <label slot="label">密&nbsp;&nbsp;&nbsp;码:</label>
                    <el-input type="password"  v-model="RoleForm.password" style="width: 250px; height: 5px;left: 20px" size="small" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item class="button">
                    <el-button type="primary" class="Login" @click="login()">登录</el-button>
                    <el-button type="primary" class="Register" @click="Register()">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                RoleForm: {
                    username: "",
                    password: "",
                },
                rules:{
                    username:[
                        { required: true, message: '用户名不能为空', trigger: 'blur'},//必填项验证
                        { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }//长度验证
                    ],
                    password:[
                        { required: true, message: '密码不能为空', trigger: 'blur' }, //必填项验证
                        { min: 3, max: 12, message: '长度在 3到 12 个字符', trigger: 'blur' }//长度验证
                    ]
                },
            }
        },
        methods:{
            login(){
                this.$refs.RoleFormRef.validate(async valid=>{
                    if (!valid) return; //验证失败
                    const {data:res}=await this.$http.post("login",this.RoleForm);//验证成功,访问后台
                    if (res.flag==="ok"){
                        this.$message.success("登录成功!!!!");//成功提示
                        this.$router.push({path:"/main"});//页面路由跳转
                    }else {
                        this.$message.error("登录失败!!!!");//失败提示
                    }
                })
            },
            Register(){
                this.$router.push({path:"/register"})
            }
        }
    }
</script>

<style xml:lang="less">
        .body{
            background: url("../../assets/images/bg.jpg");
            background-repeat:no-repeat;
            height:960px;
            width:1920px;
            background-size: 100% auto;
            margin: 0px;
            padding: 0px;
            }
        .center{
            margin-top: 8%;
            width: 35%;
            height: 38%;
            left: 500px;
            top: 150px;
            background-image: url('../../assets/images/bg-border.png');
            background-size: 80% 80%;
            background-repeat: no-repeat;
            padding: 40px 50px;
            position: absolute;
        }
       .user .el-form-item__label{
           color: #9C7049;
           padding: 0;
           margin: 0;
           font-size: 16px;
           font-weight: bold;
           line-height: 38px;
           text-align: left;
           width: 115px;
           position: absolute;
           top: 50px;
           left: 100px;
       }
    .pass .el-form-item__label{
        color: #9C7049;
        padding: 0;
        margin: 0;
        font-size: 16px;
        font-weight: bold;
        line-height: 38px;
        text-align: left;
        width: 115px;
        position: absolute;
        top: 110px;
        left: 100px;
    }
    .Login{
        background-color: #9c7049;
        color: #9c7049;
        width: 74%;
        height: 38px;
        margin: 15px auto;
        display: block;
        position: absolute;
        left: -50px;
        top: 0px;
    }
        .Register{
            background-color: #9c7049;
            color: white;
            width: 74%;
            height: 38px;
            margin: 15px auto;
            display: block;
            position: absolute;
            left: -60px;
            top: 70px;
        }
    .button .el-button{
        background-color: #9c7049;
        color: white;
    }
</style>